<!--
 * @Author: C.
 * @Date: 2023-12-04 14:19:43
-->
<template>
  <view class="page">
    <template v-for="(item, index) in routeArray">
      <view
        v-if="pageStatus[index]"
        :key="index"
        class="page__container"
        :style="pageContainerStyle(index)"
      >
        <scroll-view class="scroll-view" scroll-y>
          <component :is="item.component" />
        </scroll-view>
      </view>
    </template>
  </view>
  <TnTabbar
    v-model="currentTabbarIndex"
    fixed
    :placeholder="false"
    switch-animation
    frosted
    @change="onTabbarChange"
  >
    <TnTabbarItem
      v-for="(item, index) in routeArray"
      :key="index"
      :name="index"
      :text="item.text"
      inactive-color="#c5cad5"
      :icon="item.icon"
      :active-icon="item.icon"
    />
  </TnTabbar>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { shallowRef } from 'vue'
// ----------------------------- hooks -----------------------------
// ----------------------------- 组件 -----------------------------
import TnTabbar from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar.vue'
import TnTabbarItem from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar-item.vue'
import { useHomePage } from '@/hooks/web/useHomePage'
// ----------------------------- 其他引入 -----------------------------
const props = defineProps({
  routes: {
    type: Array,
    default: () => [],
  },
})
//----------------------------- 变量声明区 -----------------------------
const routeArray = shallowRef<any[]>(props.routes)
// ----------------------------- hooks使用区 -----------------------------
const { onTabbarChange, pageContainerStyle, currentTabbarIndex, pageStatus } =
  useHomePage({
    tabbars: routeArray.value,
  })
// ----------------------------- 钩子函数区 -----------------------------

//  ----------------------------- 自定义方法区 -----------------------------
</script>
<style lang="scss" scoped>
@import '../style/index.scss';
</style>
